<template>
	<div>
		<div class="top">
			<div class="left" @click="back()">×</div>
			<div class="rig">账户登录</div>
			<div class="left"></div>
		</div>
		<div class="img"><img src="image/Login/hema.png" alt="" /></div>
		<div class="main">
			<div class="one"  @click="go()">
				<span class="one-one">手机淘宝</span>
				<span class="one-two">快捷登录</span>
			</div>
			<div class="two"  @click="go()">
				<span class="one-one">支付宝</span>
				<span class="one-two">快捷登录</span>
			</div>
			<div class="three">
				<div class="one-one" @click="go()">账户/密码登录</div>
			</div>
		</div>
		<div class="bottom">
			<div class="left"><input type="checkbox" v-model="bool" /></div>
			<div class="right">
				<p>
					同意<span>《盒马会员服务协议》</span
					><span>《盒马隐私政策》</span
					><span>《淘宝平台服务协议》</span
					><span>《法律声明及隐私权政策》</span
					>，并已清析理解上述文件中免除或限制责任，诉讼辖等粗体或下划线的条款，愿同步创建支付宝账户
				</p>
			</div>
		</div>
		<div class="tip" v-show="boolshow">请先同意用户协议</div>
	</div>
</template>

<script>
	export default {
		methods: {
			back() {
				this.$router.go(-1);
			},
			go() {
				if (this.bool) {
					this.$router.push("/loginnest");
				}else {
					this.boolshow = true;
					setTimeout(()=>{
						this.boolshow=false
					},2000)
				}
			},
		},
		data() {
			return {
				bool: false,
				boolshow:false
			};
		},
	};
</script>

<style scoped>
	div {
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		height: 0.2rem;
		font-size: 0.11rem;
		display: flex;
		border-bottom: 1px solid #ccc;
		justify-content: space-between;
		line-height: 0.2rem;
		padding: 0 0.1rem;
	}
	.img {
		width: 100%;
	}
	.img img {
		width: 100%;
	}
	.main {
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: white;
		text-align: center;
	}
	.main .one {
		border-radius: 0.05rem;
		margin-top: 0.2rem;
		padding: 0.1rem;
		background-color: orange;
	}
	.main .one .one-one {
		font-size: 0.15rem;
	}
	.main .two {
		border-radius: 0.05rem;
		margin-top: 0.2rem;
		padding: 0.1rem;
		background-color: skyblue;
	}
	.main .two .one-one {
		font-size: 0.15rem;
	}
	.main .three {
		border-radius: 0.05rem;
		margin-top: 0.2rem;
		padding: 0.1rem;
		background-color: white;
		color: black;
		border: 1px solid #ccc;
	}
	.bottom {
		padding: 0.3rem;
		display: flex;
	}
	.bottom .left {
		padding-right: 0.05rem;
	}
	.bottom .right span {
		color: rgb(197, 226, 238);
	}
	.tip{
		position: fixed;
		left: 35%;
		bottom: 2rem;
		padding: .05rem 0.1rem;
		background-color: rgba(0, 0, 0, 0.411);
		border-radius:.05rem;
		color: #fff;
	}
</style>